<!--
 * @Description:
 * @Author: 稽辉
 * @Date: 2025-02-26 14:08:44
 * @LastEditTime: 2025-03-14 15:42:53
 * @LastEditors: 稽辉
-->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import Comment from './components/Comment.vue'
import htzRate from '@/components/htz-rate/htz-rate.vue'
import type { GoodsItem } from '@/types/global'
import {
  getGoodByIdAPI,
  getScoreNumByGoodIdAPI,
  getScoreRecordByIdAPI,
  submitGoodScoreAPI,
} from '@/services/goods'
import { useMemberStore } from '@/stores'
const changeScore = (val: number) => {
  score.value = val
}
const query = defineProps<{
  id: string
}>()
const memberStore = useMemberStore()
const good = ref<GoodsItem>()
const userId = memberStore.profile.user.id
//根据传来的id获取对应的菜品
const getGoodByIdData = async () => {
  good.value = (await getGoodByIdAPI(query.id)).data
}
//根据userId和商品id获取当前用户对该商品的评分
const getScoreRecordByIdData = async () => {
  const res = await getScoreRecordByIdAPI(query.id, userId)
  score.value = res.data
}
//根据商品id获取评论人数
const scoreNum = ref<number>(0)
const getScoreNumByGoodIdData = async () => {
  const res = await getScoreNumByGoodIdAPI(query.id)
  scoreNum.value = res.data
}
const score = ref<number>(0)
//修改商品的评分
const submitGoodScore = async () => {
  uni.showModal({
    title: '提示',
    content: '确认提交',
    showCancel: true,
    success: async (success) => {
      if (success.cancel) return
      const res = await submitGoodScoreAPI(score.value!, query.id, userId)
      if (res.code == '200') {
        uni.showToast({
          title: '操作成功', // 提示内容
          icon: 'success', // 成功图标
          duration: 2000, // 显示时间
          mask: true, // 显示蒙层
        })
        uni.$emit('refreshPage')
        getGoodByIdData()
      } else {
        uni.showToast({
          title: '操作失败', // 提示内容
          icon: 'none', // 无图标
          duration: 2000, // 显示时间
        })
      }
    },
  })
}
onMounted(() => {
  //获取评分记录
  getScoreRecordByIdData()
  //获取商品信息
  getGoodByIdData()
  //获取评分条数
  getScoreNumByGoodIdData()
})
</script>
<template>
  <!-- <div class="RateScore">RateScore</div> -->
  <!-- 评分和评论详情页 -->
  <view class="goods">
    <view class="details">
      <image class="image" :src="good?.picture"></image>
      <view class="name ellipsis">{{ good?.name }}({{ scoreNum }} 评分)</view>
      <view class="price">
        <text class="symbol">¥</text>
        <text class="number">{{ good?.price }}</text>
      </view>
      <button class="score-button" @tap="submitGoodScore">提交</button>
    </view>
    <view class="rating-area"
      >你的评价
      <!-- 星级 -->
      <view class="star-rating-container">
        <view class="content"> <htzRate :value="score" @change="changeScore" /> </view
        ><view class="htz-item-msg">{{ score }}分</view>
      </view>
    </view>
    <!-- 数据区域 -->
    <view class="score-area">
      <view>均分：</view>
      <view class="average-score">{{ good?.averageScore }}</view>
    </view>
  </view>
  <!-- 评论区 -->
  <view>
    <Comment :goodId="query.id" />
  </view>
</template>

<style scoped lang="scss">
.goods {
  position: relative;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex; /* 将 goods 设置为 flex 容器 */
  width: 100%;
  margin: 0rpx 20rpx 20rpx 0;

  .details {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 垂直对齐方式为两端对齐 */
    /* 让 details 区域尽可能扩展以填充剩余空间 */
    padding-left: 10rpx; /* 给左侧的商品图片留出一些间距 */

    .image {
      border-radius: 8px;
      width: 150rpx;
      height: 150rpx;
    }
    .name {
      padding: 5rpx;
      font-size: 22rpx;
      color: #333;
      white-space: pre-wrap;
      width: 150rpx;
    }
    .price {
      padding: 5rpx;
      font-size: 18rpx;
      color: #cf4444;
    }
    .score-button {
      position: absolute;
      margin-top: 10rpx;
      right: 4rpx; // 距离右侧 4px
      bottom: 10rpx; // 距离底部 10px
      padding: 5rpx 50rpx;
      background-color: #007bff;
      color: #fff;
      font-size: 20rpx;
      border-radius: 20rpx;
      text-align: center;
      transition: background-color 0.3s ease;
      &.button-hover {
        background-color: #0056b3;
      }
    }
  }
  .rating-area {
    background-color: rgb(97, 188, 97);
    border-radius: 20rpx;
    color: white;
    padding: 5rpx;
    text-align: center;
    height: 100%;
    flex-grow: 1; /* 让评分区尽可能扩展以填充剩余空间 */
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    height: 150rpx; /* 设置固定高度以便于布局 */
    .star-rating-container {
      background-color: white;
      border-radius: 20rpx;
      flex: 3; /* 占据3/4的空间 */
      display: flex;
      align-items: center;
      color: black;
    }
  }
  .score-area {
    background-color: rgb(106, 106, 129);
    text-align: center;
    border-radius: 20rpx;
    width: 150rpx;
    height: 150rpx;
    color: white;
    position: relative;
    .average-score {
      position: absolute;
      bottom: 50rpx;
      right: 75rpx;
      font-weight: bold;
      text-align: center;
      line-height: 0 auto;
    }
  }
}
</style>
